<div class="main-container">
  <div class="row">
    <p style="padding-left: 15px;">
      {{'DEMO.STEPS.DESCRIPTION' | translate}}
    </p>
    <hr>
    <div class="free-demo-board" fGrid="12">
      <div class="free-demo-board">
        <div class="free-card-board">
          <h3 class="free-toolbar">Import</h3>
          <free-tab-group direction="right" theme="line">
            <free-tab header="CODE">
              <free-code lang="typescript">
                import &#123;StepsModule&#125; from 'freeng/freeng';
              </free-code>
            </free-tab>
          </free-tab-group>
        </div>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-steps [model]="items" [activeIndex]="activeIndex">
              <free-step-content>
                1
              </free-step-content>
              <free-step-content>
                2
              </free-step-content>
              <free-step-content>
                3
              </free-step-content>
              <f-footer>
                <button fButton (click)="toStep(-1)">Prev</button>
                <button fButton (click)="toStep(1)">Next</button>
              </f-footer>
            </free-steps>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-steps [model]="items" [activeIndex]="activeIndex"&gt;
                &lt;free-step-content&gt;
                  1
                &lt;/free-step-content&gt;
                &lt;free-step-content&gt;
                  2
                &lt;/free-step-content&gt;
                &lt;free-step-content&gt;
                  3
                &lt;/free-step-content&gt;
                &lt;f-footer&gt;
                  &lt;button fButton (click)="toStep(-1)"&gt;Prev&lt;/button&gt;
                  &lt;button fButton (click)="toStep(1)"&gt;Next&lt;/button&gt;
                &lt;/f-footer&gt;
              &lt;/free-steps&gt;
            </free-code>
            <h4>Javascript</h4>
            <free-code lang="javascript">
              this.activeIndex = 0;
              this.items = [
                &#123;label: 'Step 1'&#125;,
                &#123;label: 'Step 2'&#125;,
                &#123;label: 'Step 3'&#125;
              ];

              toStep(add: number) &#123;
                this.activeIndex += add;
                if (this.activeIndex >= this.items.length) &#123;
                  this.activeIndex = this.items.length - 1;
                &#125;
              &#125;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Readongly</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-steps [model]="steps" [readonly]="false" [(activeIndex)]="stepIndex">
              <free-step-content>
                1
              </free-step-content>
              <free-step-content>
                2
              </free-step-content>
              <free-step-content>
                3
              </free-step-content>
              <f-footer>
                <button fButton (click)="toClickStep(-1)">Prev</button>
                <button fButton (click)="toClickStep(1)">Next</button>
              </f-footer>
            </free-steps>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-steps [model]="steps" [readonly]="false" [(activeIndex)]="stepIndex"&gt;
                &lt;free-step-content&gt;
                  1
                &lt;/free-step-content&gt;
                &lt;free-step-content&gt;
                  2
                &lt;/free-step-content&gt;
                &lt;free-step-content&gt;
                  3
                &lt;/free-step-content&gt;
                &lt;f-footer&gt;
                  &lt;button fButton (click)="toClickStep(-1)"&gt;Prev&lt;/button&gt;
                  &lt;button fButton (click)="toClickStep(1)"&gt;Next&lt;/button&gt;
                &lt;/f-footer&gt;
              &lt;/free-steps&gt;
            </free-code>
            <h4>Javascript</h4>
            <free-code lang="javascript">
              this.activeIndex = 0;
              this.items = [
              &#123;label: 'Step 1'&#125;,
              &#123;label: 'Step 2'&#125;,
              &#123;label: 'Step 3'&#125;
              ];

              toStep(add: number) &#123;
              this.activeIndex += add;
              if (this.activeIndex >= this.items.length) &#123;
              this.activeIndex = this.items.length - 1;
              &#125;
              &#125;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Wired</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-steps [model]="items" [wired]="true" [activeIndex]="wiredIndex">
              <free-step-content>
                1
              </free-step-content>
              <free-step-content>
                2
              </free-step-content>
              <free-step-content>
                3
              </free-step-content>
            </free-steps>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-steps [model]="items" [wired]="true" [activeIndex]="wiredIndex"&gt;
                &lt;free-step-content&gt;
                  1
                &lt;/free-step-content&gt;
                &lt;free-step-content&gt;
                  2
                &lt;/free-step-content&gt;
                &lt;free-step-content&gt;
                  3
                &lt;/free-step-content&gt;
              &lt;/free-steps&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <div class="row">
    <div fGrid="12" class="free-demo-board">
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>

      <div class="free-demo-row">
        <h3 class="free-title">free-steps</h3>
        <p>{{'COMPONENT.STEPS' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>model</free-table-cell>
              <free-table-cell>
                <ng-template><code>Array</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.STEPS.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>readonly</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.STEPS.OPTION.1' | translate}}(primary/info/success/warning/danger)
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>activeIndex</free-table-cell>
              <free-table-cell>
                <ng-template><code>Number</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.STEPS.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>wired</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.STEPS.OPTION.3' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
        <h3 class="free-title">{{'EVENT' | translate}}</h3>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'EVENT' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>onStepChange</free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.STEPS.EVENTS.0' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>

      <div class="free-demo-row">
        <h3 class="free-title">free-step-content</h3>
        <p>{{'DEMO.STEPS.CHILD.0' | translate}}</p>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
